<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorate="layout">
<head>
<title>数据统计</title>
</head>
<body>
	<li layout:fragment="servers-info"><a><i class="fa fa-home"></i>服务器监控管理<span class="fa fa-chevron-down"></span></a>
		<ul class="nav child_menu">
			<li th:each="serverSystem : ${serverSystemList}">
				<a th:href="@{'/servers/info/' + ${serverSystem.ip} + '/' + ${serverSystem.port}}" th:text="${serverSystem.description}"></a>
			</li>
		</ul>
	</li>
	<div class="row tile_count" layout:fragment="header">
		<div class="col-md-3 col-sm-4 col-xs-6 tile_stats_count">
			<span class="count_top"><i class="fa fa-user"></i>今天清单数</span>
			<div class="count" th:text="${dayCount}"></div>
			<span class="count_bottom">
				<i th:class="${0 > fromDay ? 'red' : 'green'}">
					<i th:class="${0 > fromDay ? 'fa fa-sort-desc' : 'fa fa-sort-asc'}"></i>
					<i th:text="${0 == fromDay ? (0 == dayCount ? '0%' : '新增业务') : fromDay + '%'}"></i>
				</i>比昨天
			</span>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6 tile_stats_count">
			<span class="count_top"><i class="fa fa-user"></i>本周清单数</span>
			<div class="count" th:text="${weekCount}"></div>
			<span class="count_bottom">
				<i th:class="${0 > fromWeek ? 'red' : 'green'}">
					<i th:class="${0 > fromWeek ? 'fa fa-sort-desc' : 'fa fa-sort-asc'}"></i>
					<i th:text="${0 == fromWeek ? (0 == weekCount ? '0%' : '新增业务') : fromWeek + '%'}"></i>
				</i>比上周
			</span>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6 tile_stats_count">
			<span class="count_top"><i class="fa fa-user"></i>本月清单数</span>
			<div class="count" th:text="${monthCount}"></div>
			<span class="count_bottom">
				<i th:class="${0 > fromMonth ? 'red' : 'green'}">
					<i th:class="${0 > fromMonth ? 'fa fa-sort-desc' : 'fa fa-sort-asc'}"></i>
					<i th:text="${0 == fromMonth ? (0 == monthCount ? '0%' : '新增业务') : fromMonth + '%'}"></i>
				</i>比上月
			</span>
		</div>
		<div class="col-md-3 col-sm-4 col-xs-6 tile_stats_count">
			<span class="count_top"><i class="fa fa-user"></i>今年清单数</span>
			<div class="count" th:text="${yearCount}"></div>
			<span class="count_bottom">
				<i th:class="${0 > fromYear ? 'red' : 'green'}">
					<i th:class="${0 > fromYear ? 'fa fa-sort-desc' : 'fa fa-sort-asc'}"></i>
					<i th:text="${0 == fromYear ? (0 == yearCount ? '0%' : '新增业务') : fromYear + '%'}"></i>
				</i>比去年
			</span>
		</div>
	</div>
	<div layout:fragment="content">
		<div class="row">
			<div class="col-md-12 col-sm-12 col-xs-12">
				<div class="x_panel">
					<div class="x_title">
						<h2>清单信息每天走势</h2>
						<ul class="nav navbar-right panel_toolbox">
							<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">Settings 1</a>
									</li>
									<li><a href="#">Settings 2</a>
									</li>
								</ul>
							</li>
							<li><a class="close-link"><i class="fa fa-close"></i></a>
							</li>
						</ul>
						<div class="clearfix"></div>
					</div>
					<div class="x_content">
						<canvas id="invtHeadDayCountLine"></canvas>
					</div>
				</div>
			</div>
			<div class="col-md-12 col-sm-12 col-xs-12">
				<div class="x_panel">
					<div class="x_title">
						<h2>清单信息每周走势</h2>
						<ul class="nav navbar-right panel_toolbox">
							<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">Settings 1</a>
									</li>
									<li><a href="#">Settings 2</a>
									</li>
								</ul>
							</li>
							<li><a class="close-link"><i class="fa fa-close"></i></a>
							</li>
						</ul>
						<div class="clearfix"></div>
					</div>
					<div class="x_content">
						<canvas id="invtHeadWeekCountLine"></canvas>
					</div>
				</div>
			</div>
			<div class="col-md-12 col-sm-12 col-xs-12">
				<div class="x_panel">
					<div class="x_title">
						<h2>清单信息每月走势</h2>
						<ul class="nav navbar-right panel_toolbox">
							<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">Settings 1</a>
									</li>
									<li><a href="#">Settings 2</a>
									</li>
								</ul>
							</li>
							<li><a class="close-link"><i class="fa fa-close"></i></a>
							</li>
						</ul>
						<div class="clearfix"></div>
					</div>
					<div class="x_content">
						<canvas id="invtHeadCountLine"></canvas>
					</div>
				</div>
			</div>
			<div class="col-md-6 col-sm-6 col-xs-12">
				<div class="x_panel">
					<div class="x_title">
						<h2>清单总量比例</h2>
						<ul class="nav navbar-right panel_toolbox">
							<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">Settings 1</a>
									</li>
									<li><a href="#">Settings 2</a>
									</li>
								</ul>
							</li>
							<li><a class="close-link"><i class="fa fa-close"></i></a>
							</li>
						</ul>
						<div class="clearfix"></div>
					</div>
					<div class="x_content">
						<canvas id="invtHeadCountPieChart"></canvas>
					</div>
				</div>
			</div>
			<div class="col-md-6 col-sm-6 col-xs-12">
				<div class="x_panel">
					<div class="x_title">
						<h2>清单放行比例</h2>
						<ul class="nav navbar-right panel_toolbox">
							<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#">Settings 1</a>
									</li>
									<li><a href="#">Settings 2</a>
									</li>
								</ul>
							</li>
							<li><a class="close-link"><i class="fa fa-close"></i></a>
							</li>
						</ul>
						<div class="clearfix"></div>
					</div>
					<div class="x_content">
						<canvas id="invtHeadReleasePieChart"></canvas>
					</div>
				</div>
			</div>
		</div>
		<div class="clearfix"></div>
		<div class="row">
			<div class="col-md-6 col-sm-6 col-xs-12">
				<div class="x_panel title">
					<div class="x_title">
						<h2>清单总量</h2>
						<ul class="nav navbar-right panel_toolbox">
							<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
							</li>
							<li><a class="close-link"><i class="fa fa-close"></i></a>
							</li>
						</ul>
						<div class="clearfix"></div>
					</div>
					<div class="x_content">
						<h4>清单总量前10名</h4>
						<div th:each="invtHead : ${invtHeadCountList}" class="widget_summary">
							<div class="w_left w_25">
								<span th:text="${invtHead.ebcName}"></span>
							</div>
							<div class="w_center w_55">
								<div class="progress">
									<div class="progress-bar progress-bar-success" th:aria-valuenow="${invtHead.percentage}"
											th:data-transitiongoal="${invtHead.percentage}" th:style="'width: ' + ${invtHead.percentage} + '%;'">
									</div>
								</div>
							</div>
							<div class="w_right w_20">
								<span th:text="${invtHead.count}"></span>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6 col-sm-6 col-xs-12">
				<div class="x_panel title">
					<div class="x_title">
						<h2>清单放行量</h2>
						<ul class="nav navbar-right panel_toolbox">
							<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
							</li>
							<li><a class="close-link"><i class="fa fa-close"></i></a>
							</li>
						</ul>
						<div class="clearfix"></div>
					</div>
					<div class="x_content">
						<h4>清单放行量前10名</h4>
						<div th:each="invtHead : ${invtHeadReleaseList}" class="widget_summary">
							<div class="w_left w_25">
								<span th:text="${invtHead.ebcName}"></span>
							</div>
							<div class="w_center w_55">
								<div class="progress">
									<div class="progress-bar progress-bar-success" th:aria-valuenow="${invtHead.percentage}"
											th:data-transitiongoal="${invtHead.percentage}" th:style="'width: ' + ${invtHead.percentage} + '%;'">
									</div>
								</div>
							</div>
							<div class="w_right w_20">
								<span th:text="${invtHead.count}"></span>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			$(function() {
				// Pie chart
				$.getJSON("/invts/getInvtHeadTotal", function(data) {
					var ctx = document.getElementById("invtHeadCountPieChart");
					var pieChart = new Chart(ctx, {
						data: data,
						type: 'pie',
						otpions: {
							legend: false
						}
					});
				});

				$.getJSON("/invts/getInvtHeadTotal", {type: 'release'}, function(data) {
					var ctx = document.getElementById("invtHeadReleasePieChart");
					var pieChart = new Chart(ctx, {
						data: data,
						type: 'pie',
						otpions: {
							legend: false
						}
					});
				});

				$.getJSON("/invts/getDayInvtInfo", function(data) {
					var ctx = document.getElementById("invtHeadDayCountLine");
					var lineChart = new Chart(ctx, {
						type: 'line',
						data: data
					});
				});

				$.getJSON("/invts/getWeekInvtInfo", function(data) {
					var ctx = document.getElementById("invtHeadWeekCountLine");
					var lineChart = new Chart(ctx, {
						type: 'line',
						data: data
					});
				});

				$.getJSON("/invts/getMonthInvtInfo", function(data) {
					var ctx = document.getElementById("invtHeadCountLine");
					var lineChart = new Chart(ctx, {
						type: 'line',
						data: data
					});
				});
			});
		</script>
	</div>
</body>
</html>
